<%--
  Created by IntelliJ IDEA.
  User: YuanDali
  Date: 2020/7/20
  Time: 20:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="iframe-h">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>订单详情页</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="css/admin.css" />
</head>
<style type="text/css">
    .pagination li {
        line-height: 28px;
        width: 50px;
        color: #333;
        font-size: 12px;
        text-align: center;
    }

</style>
<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form" action="">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <input type="text" id="kw" name="title"  placeholder="请输入用户名"  class="layui-input">
                </div>
                <div class="layui-inline">
                    <select name="states" id="states" lay-filter="status">
                        <option value="3">显示全部</option>
                        <option value="1">显示完成</option>
                        <option value="0">退票审核</option>

                    </select>
                </div>
                <%--<button class="layui-btn layui-btn-normal" id="seach_btn" lay-submit="search">搜索</button>--%>
                <input class="layui-btn layui-btn-normal" id="seach_btn" lay-submit="search" value="搜索"></input>
            </div>

        </form>
        <div class="layui-inline" >
            <label style="font-size:15px;">显示
                <select name="pageSize" id="pageSize" lay-filter="pageSize" style="width: 100px;">
                    <option value="10">10</option>
                    <option value="50">50</option>
                    <option value="100">100</option>

                </select>条</label>
        </div>
        <div class="layui-form" id="table-list">
            <table class="layui-table" lay-even lay-skin="nob">
                <colgroup>
                    <col width="50">
                    <col class="hidden-xs" width="100">
                    <col class="hidden-xs" width="100">
                    <col>
                    <col class="hidden-xs" width="200">
                    <col class="hidden-xs" width="150">
                    <col width="80">
                    <col width="150">
                </colgroup>
                <thead>
                    <tr>
                        <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
                        <th class="hidden-xs">订单id</th>
                        <th class="hidden-xs">用户名</th>
                        <th class="hidden-xs">下单时间</th>
                        <th class="hidden-xs">电影名</th>
                        <th class="hidden-xs">影院名</th>
                        <th class="hidden-xs">播放厅</th>
                        <th class="hidden-xs">座位号</th>
                        <th class="hidden-xs">总金额</th>
                        <th class="hidden-xs">订单状态</th>
                        <th class="hidden-xs">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <%--<tr>
                        <td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td>
                        <td class="hidden-xs">1</td>
                        <td class="hidden-xs">张无忌</td>
                        <td class="hidden-xs">1989-10-14</td>
                        <td class="hidden-xs">西虹市首富</td>
                        <td class="hidden-xs">万达影院</td>
                        <td class="hidden-xs">一号厅</td>
                        <td class="hidden-xs">6-6,6-7</td>
                        <td class="hidden-xs">188</td>
                        <td><button class="layui-btn layui-btn-mini layui-btn-normal">正常</button></td>
                        <td>
                            <div class="layui-inline">
                                <button title="修改" class="layui-btn layui-btn-small layui-btn-normal go-btn" data-id="1" data-url="article-detail.html"><i class="layui-icon">&#xe642;</i></button>
                                <button title="删除" class="layui-btn layui-btn-small layui-btn-danger del-btn" data-id="1" data-url="article-detail.html"><i class="layui-icon">&#xe640;</i></button>
                            </div>
                        </td>
                    </tr>--%>

                </tbody>
            </table>

            <%--分页--%>
            <div class="page-wrap">
                <ul class="pagination">
                    <%--<li class="disabled"><span>«</span></li>
                    <li class="active"><span>1</span></li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">»</a>
                    </li>--%>
                </ul>
            </div>
        </div>
    </div>
</div>



<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        //一进网页显示订单列表
        sendAjax(1);
        //条件搜索
        $("#seach_btn").click(function () {
            sendAjax(1);
        })
        //页码点击
       $(document).on("click",".pagination a",function () {
           var pageNum=$(this).prop("title");
           sendAjax(pageNum);
       })
        //pageSize下拉框事件
        $("#pageSize").change(function () {
            sendAjax(1);
        })
        //删除事件
        $(document).on("click","#delOrder",function () {
            if (window.confirm("你确定要删除该订单吗？")){
                var orderId=$(this).data("orderid");
                $.ajax({
                    async:true,
                    url:"${pageContext.request.contextPath}/order/delOrderById",
                    type: "post",
                    data:{
                        orderId:orderId
                    },
                    dataType: "json",
                    success:function (result) {
                        if (result==true){
                            alert("删除成功！");
                        }else if (result==false){
                            alert("删除失败！");
                        }
                        sendAjax(1);
                    },
                    error:function () {
                        alert("Ajax异步请求失败！！");
                    }
                })
            }
        })
        //退票通过事件
        $(document).on("click","#updateState",function () {
            if (window.confirm("确定要通过该订单的退票申请吗？")){
                var orderId=$(this).data("orderid");
                $.ajax({
                    async:true,
                    url:"${pageContext.request.contextPath}/order/updateStateById",
                    type: "post",
                    data:{
                        orderId:orderId,

                    },
                    dataType: "json",
                    success:function (result) {
                        if (result==true){
                            alert("退票成功！");
                        }else if (result==false){
                            alert("退票失败！");
                        }
                        sendAjax(1);
                    },
                    error:function () {
                        alert("Ajax异步请求失败！！");
                    }
                })
            }
        })
    })


    function sendAjax(pageNum){
        var accountName=$("#kw").val();
        var isDelete=$("#states").val();
        var pageSize=$("#pageSize").val();
        var adminId="${sessionScope.adminId}";
        $.ajax({
            async:true,
            url:"${pageContext.request.contextPath}/order/getOrderAllDetail",
            type:"post",
            dataType:"json",
            data:{
                pageNum:pageNum,
                pageSize:pageSize,
                accountName:accountName,
                isDelete:isDelete,
                adminId:adminId
            },
            success:function (result) {
                var content="";
                //渲染表格、遍历
                $.each(result.list,function (index,Order) {
                    content+="<tr>\n" +
                        "                        <td><input type=\"checkbox\" name=\"\" lay-skin=\"primary\" data-id=\"1\"></td>\n" +
                        "                        <td class=\"hidden-xs\">"+Order.orderId+"</td>\n" +
                        "                        <td class=\"hidden-xs\">"+Order.account.accountName+"</td>\n" +
                        "                        <td class=\"hidden-xs\">"+Order.orderTime+"</td>\n" +
                        "                        <td class=\"hidden-xs\">"+Order.movie.movieName+"</td>\n" +
                        "                        <td class=\"hidden-xs\">"+Order.cinema.cinemaName+"</td>\n" +
                        "                        <td class=\"hidden-xs\">"+Order.broadcastHall.hallName+"</td><td class=\"hidden-xs\">\n";

                    for (var i=0;i<Order.orderDetails.length;i++){
                        content+=Order.orderDetails[i].seat.xAxis+"-"+Order.orderDetails[i].seat.yAxis +"&nbsp; &nbsp;"   ;
                    }

                    content+= " </td><td class=\"hidden-xs\">"+Order.orderDetails[0].price*Order.orderDetails.length+"</td>" ;

                    if (Order.isDelete==0) {
                        content+=" <td><button class=\"layui-btn layui-btn-mini layui-btn-normal\">"+(Order.isDelete==0?"退票申请":(Order.isDelete==1?"完成":"退票成功"))+"</button></td>\n" +
                            "                        <td>\n" +
                            "                            <div class=\"layui-inline\">\n" +
                            "                                <button id=\"delOrder\" data-orderid=\""+Order.orderId+"\"  class=\"layui-btn layui-btn-small layui-btn-danger del-btn\" >删除</button  >\n" +
                            "                                <button id=\"updateState\"  data-orderid=\""+Order.orderId+"\" class=\"layui-btn layui-btn-small layui-btn-normal go-btn\"  >通过</button >\n" +
                            "                            </div>\n" +
                            "                        </td>\n" +
                            "                    </tr>";
                    }else {
                        content+=" <td><button class=\"layui-btn layui-btn-mini layui-btn-normal\">"+(Order.isDelete==0?"退票申请":(Order.isDelete==1?"完成":"退票成功"))+"</button></td>\n" +
                            "                        <td>\n" +
                            "                            <div class=\"layui-inline\">\n" +
                            "                                <button id=\"delOrder\" data-orderid=\""+Order.orderId+"\" class=\"layui-btn layui-btn-small layui-btn-danger del-btn\" >删除</button >\n" +
                            "                            </div>\n" +
                            "                        </td>\n" +
                            "                    </tr>";
                    }

                })
                // 填充
                $("#table-list tbody").html(content);
                //分页填充
                var pageContent="";
                //首页+上一页
                if (result.pageNum==1){
                    pageContent="<li class=\"disabled\" title=\"1\"> <span >首页</span></li>" ;
                    pageContent+="<li class=\"disabled\" title=\"1\"><span >上一页</span></li>";
                }else {
                    pageContent="<li><a href=\"#\" title=\"1\">首页</a></li>";
                    pageContent+="<li><a href=\"#\" title=\""+result.prePage+"\">上一页</a></li>";
                }
                //页码
                for (var i=1;i<=result.pages;i++){
                    if (result.pageNum==i){
                        pageContent+="<li class=\"active\" title=\""+i+"\"><span >"+i+"</span></li>";
                    }else{
                        pageContent+="<li><a href=\"#\" title=\""+i+"\">"+i+"</a></li>";
                    }
                }
                //尾页+下一页
                if (result.pageNum==result.pages){
                    pageContent+="<li class=\"disabled\" title=\""+result.pages+"\"><span>下一页</span></li>" ;
                    pageContent+="<li class=\"disabled\" title=\""+result.pages+"\"><span>尾页</span></li>"
                }else {
                    pageContent+="<li><a href=\"#\" title=\""+result.nextPage+"\">下一页</a></li>";
                    pageContent+="<li><a href=\"#\" title=\""+result.pages+"\">尾页</a></li>";
                }
                $(".pagination").html(pageContent);



            },
            error:function () {
                alert("ajax异步请求失败！！");
            }
        })
    }




</script>
</html>